<template>
	<view>
		<view class="boxl" v-for="(item,index) in lists" :key="index">
			<view class="dev">姓名<input type="text" placeholder="请输入姓名" v-model="name"></view>
			<view class="dev">身份证<input type="text" placeholder="请输入身份证" v-model="id_card"></view>
			<view class="dev">手机号<input type="text" placeholder="请输入手机号" v-model="phone"></view>
			<view class="uni-list">
				<view class="dev">
					<view class="uni-list-cell-left">
						现居地址
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" mode=region>
							<view class="uni-input">{{address?address:'请选择现居地址'}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="dev">现居详细地址<input type="text" placeholder="请输入现居详细地址" v-model="de_address"></view>
			<view class="uni-list">
				<view class="dev">
					<view class="uni-list-cell-left">
						疫苗人群分类
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChanges" :value="index" :range="range">
							<view class="picker">
								{{range[index]}}
							</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="bg">
				<view>{{item.Hospital}}</view>
				<view>{{item.address}}</view>
				<view>
					<text class="txt">{{item.company[0]}}</text>
					<text class="txt">{{item.company[1]}}</text>
				</view>

			</view>
			<view class="item2" @click="sut(item,index)" :class="{'active':active==index}">
				<view>{{item.week[0].day}}</view>
				<view>{{item.week[0].date}}</view>
				<view>{{item.week[0].Have}}</view>
			</view>
			<view v-for="(item,index) in lists[0].lasting" :key="index">
				<view @click="data(item)">
					<view>{{item.period}}</view>
					<view class="" style="display: flex; justify-content: space-between;">
						<view class="item3" v-for="(ele,i) in item.time" :key="i" @click="btn(ele)"
							:class="{'active':actives==ele.start_time}">
							<view>
								{{ele.start_time}}-{{ele.end_time}}
							</view>
							<view>剩余{{ele.over}}</view>
						</view>
					</view>

				</view>

			</view>
		</view>
		<view class="mini-btn">
			<button type="primary" plain="true">取消</button>
			<button type="primary" @click="add">提交预约</button>
		</view>

	</view>
</template>

<script>
	import {
		order,
		addlist
	} from "../utils/api"
	export default {
		data() {
			return {
				name: '', //姓名
				id_card: '', //身份证
				phone: '', //手机号
				lists: [], //总数据
				address: '', //省市区
				de_address: "", //详细地址,
				crowd_sort: '', //接种人群分类
				date: '', //预约日期
				period: '', //预约时段上午或者下午
				reserve_time: '', //预约时段
				when: 0, //下标
				active: 111,
				actives: 111,
				range: [
					"因私出国人员",
					"海关边检人员",
					"公安系统,消防",
					"党政机关,事业单位人员",
					"社区工作者",
					"医疗卫生人员",
					"卫生系统内工作的其他人员",
					"因公出国人员",
					"对外劳务派遣人员",
					"留学生",
					"留学生",
					"教育工作者",
					"小学和中学学生",
					"其他人员",
				],
			}
		},
		methods: {
			// 人群

			bindPickerChanges(e) {
				console.log(e);
				this.crowd_sort = this.range[e.detail.value]
			},
			// 时间
			data(item) {
				console.log(11);
				this.period = item.period

			},

			// 切换
			sut(item, index) { //日期切换
				this.active = index
				this.date = item.week[0].date
			},
			btn(ele) {
				console.log(ele);
				this.actives = ele.start_time
				this.reserve_time = ele.start_time+''+'-'+ele.end_time
				this.when = ele.when
			},
			// 提交预约
			add() {
				let adds = {
					name: this.name,
					id_card: this.id_card,
					phone: this.phone,
					address: this.address,
					de_address: this.de_address,
					crowd_sort: this.crowd_sort,
					date: this.date,
					period: this.period,
					reserve_time: this.reserve_time,
					when: this.when
				}
				console.log(98, adds);
				addlist(
					adds
				).then(res => {
					console.log(res);
				})
			},
			bindPickerChange(e) {
				console.log(e)
				this.address = e.detail.value.join('')
				console.log(104, this.address);
			}
		},
		onLoad() {

			order().then((res) => {
				console.log(res)
				this.lists = res.data.data
			})
		}
	}
</script>

<style lang="scss" scoped>
	.mini-btn {
		display: flex;
		width: 100%;
	}

	.dev {
		display: flex;
		height: 30px;
		line-height: 30px;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		padding: 10px;
	}

	.txt {
		background: #f7f7f7;
		width: 100px;
		height: 50px;
		border-radius: 10px;
	}

	.item2 {
		background: #f7f7f7;
		width: 80px;
		text-align: center;
		margin: 10px 0;
	}

	.item3 {
		background: #f7f7f7;
		width: 100px;
		text-align: center;
		margin: 10px;
	}

	.itemlist {
		display: flex;
	}

	.uni-list-cell {
		display: flex;
		justify-content: space-between;
	}

	.active {
		background: #2c76ef !important;
	}
</style>
